<template>
    <div class="wiper">
        <Filter title="托盘主数据" :items="items" :model="condition" />
        <Table :buttons="buttons" :columns="columns" :data="data" :pagination="condition" />
        <Form ref="formRef" v-model:show="show" :rules="rules" :model="formData" :items="formItems">

        </Form>
    </div>
</template>
<script>
import { message, Modal } from "ant-design-vue";
import Filter from "../../components/Filter";
import Table from "../../components/Table";
import Form from "../../components/Form";
import { pager, details, save, remove } from "../../api/container";
import { listSite } from "../../api/site";
import {
    ColumnProps, RuleProps, FormData,
    FilterItems, FormItems, FilterCondition
} from "./config";
import { Dictionary } from "../../utils/Dictionary";
import {FilterModelProps} from "@/page/account/config";

export default {
    name: 'container',
    data() {
        return {
            items: FilterItems,
            data: [{}],
            show: false,
            formData: FormData,
            rules: RuleProps,
            columns: ColumnProps,
            formItems: FormItems,
            condition: {
            ...FilterCondition,
            onChange: (page, pageSize)=>{
              this.condition.current = page;
              this.condition.pageSize = pageSize;
              this.load();
            }
          },
        }
    },
    components: {
        Filter,
        Table,
        Form
    },
    computed: {
        isDictionary() {
            return this.$store.state.dictionary
        }
    },
    watch: {
        isDictionary(data) {
            this._containerType(data);
        }
    },
    mounted() {
        this.load();
        this._containerType(this.$store.state.dictionary);
    },
    methods: {
        /**
         * 添加方法
         */
        add() {
            this.showQtyField();
            this.formData.id = "";
            this.$refs.formRef.resetField();
            this.show = true;
        },
        /**
         * 修改方法
         */
        modify(ids) {
            this.hideQtyField();
            this.show = true;
            details(ids.join(",")).then(res => {
                this.formData = res.data;
            })
        },
        /**
         * 删除方法
         */
        delete(ids) {
            return new Promise((resolve, reject) => {
                remove(ids.join(",")).then(res => {
                    this.load();
                    return resolve(res);
                }).catch(e => {
                    return reject(e);
                })
            })
        },
        /**
         * 提交
         */
        submit() {
            return new Promise((resolve, reject) => {
                save(this.formData).then(res => {
                    this.load();
                    return resolve(res);
                }).catch((e) => {
                    return reject(e);
                })
            })
        },
        /**
         * 加载数据
         */
        load() {
            pager(this.condition).then(res => {
                this.data = res.data.rows;
                this.condition.total = res.data.total;
            })
        },

        /**
         * 重命名
         * @private
         */
        _rename(list, key = "id") {
            return list?.map(item => {
                return { label: item.name, value: item[key], children: this._rename(item.children) }
            });
        },
        /**
         * 查找托盘类型
         * @private
         */
        _containerType(data) {
            const containerTypes = this._rename(data.filter(item => item.code === Dictionary.CONTAINER_TYPE)
                .map(item => item.children)[0], "code");
            this.items.filter(item => item.key === 'type')[0].data = containerTypes;
            this.formItems.filter(item => item.key === 'type')[0].data = containerTypes;
        },
        /**
         * 查找所属站点
         * @private
         */
        _belongSite() {
            listSite().then(res => {
                this.items.filter(item => item.key === 'siteCode')[0].data = this._rename(res.data, "code");
                this.formItems.filter(item => item.key === 'siteCode')[0].data = this._rename(res.data, "code");
            })
        },
        hideQtyField() {

            this.formItems = this.formItems.map(item => {
                if (item.key === 'qty') {
                return { ...item, isShow: false };
                }
                return item;
            });
        },
        showQtyField() {
            this.formItems = this.formItems.map(item => {
                if (item.key === 'qty') {
                return { ...item, isShow: true };
                }
                return item;
            });
        }
    }
}
</script>
<style></style>
